body{
    font-family: none;
}
.content{
    background-image: url('../img/background.jpg');
    background-size: 100% 100%;
}
.top{
    padding: 0.1rem;
}
.myPrize{
    position: absolute;
    right: 0rem;
    top: 8.6rem;
    width: 0.7rem;
}
.coupletBox{
    height: 8rem;
    width: 75%;
    margin:0px auto;
    padding: 0.5rem 0.8rem;
    background-image: url('../img/redPicket.png');
    background-size:100% 100%;
    position: relative;
}
.openButton{
    width: 1.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0.6rem;
}
.redPacket {
    font-size: 0.25rem;
    border:1px solid #666;
    border-radius: 50%;
    color: #666;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0.3rem 0.1rem;
    text-align: center;
    margin: auto;
}
.couplet{
    width: 1.3rem;
    background-color: transparent;
    font-size: 0.3rem;
    padding: 0.3rem;
    text-align: center;
    margin-top: 1.8rem;
    color: #ffcd63;
    border-radius: 0.1rem;
    position: relative;
    height: 4.4rem;
    display: flex;
    align-items: center;
}
.couplet.notLight{
    background-image: url('../img/notLight.png');
    background-size: 100% 100%;
    font-size: 0.25rem;
    height: 4.4rem;
}
.coupletNum{
    background-image: url('../img/num.png');
    background-size: 100% 100%;
    width: 0.6rem;
    height: 0.6rem;
    text-align: center;
    font-size: 0.3rem;
    padding: 0.06rem;
    border-radius: 50%;
    position: absolute;
    color: #5c3e00;
    top: -0.15rem;
    right: -0.2rem;
}
.couplet.light{
    background-color: #ed4a3a;
    box-shadow: -1px 1px 10px #2d2929;
}
.coupletBottom{
    width: 1.3rem;
    height: 0.7rem;
    text-align: center;
    font-size: 0.22rem;
    padding: 0.2rem 0;
    margin-top: 0.2rem;
    background-image: url('../img/give.png');
    background-size: 100% 100%;
    border-radius: 0.1rem;
    color: #d10a1a;
    justify-content: center;
}
.coupletListBox{
    width: 100%;
    overflow: auto;
}
.coupletList.row{
    width: 7rem;
    padding: 0 0.2rem;
    margin: 0;
}
.coupletList .col-xs-2{
    padding: 0.05rem;
}
.coupletList .col-xs-2 .coupletType,
.coupletList .col-xs-2 .bigRed {
    text-align: center;
    background-color: #b95046;
    font-size: 0.4rem;
    height: 0.9rem;
    width: 0.9rem;
    border-radius: 0.16rem;
    padding: 0.12rem 0;
    color: #373737;
    box-shadow: -2px 2px 5px #000;
}
.coupletList .col-xs-2 .bigRed{
    background-color: #fed16f;
}
.coupletList .col-xs-2.active .coupletType,
.coupletList .col-xs-2.active .bigRed {
    border:2px solid #ffd06a;
    color: #f1d16c;
}
.coupletName {
    font-size: 0.25rem;
    color: #e64434;
    text-align: center;
}
.myhide{
    display: none;
}
.coupletList .col-xs-2 .opened {
    background-color: #ed4a3a;
}
.havechai{
    background-image: url('../img/havechai.png');
    background-size: 100% 100%;
    height: 7.4rem;
    padding: 0 0.4rem;
    width: 80%; 
    margin-top: 0.65rem;
}
.havechai .cross{
    text-align: center;
    width: 3rem;
    height: 1rem;
    background: #f75343;
    color: #ffcd63;
    border-radius: 0.1rem;
    box-shadow: -4px 4px 10px #524959;
    display: flex;
    align-items: center;
    font-size: 0.5rem;
    justify-content: center;
    margin: 0.5rem auto 0 auto;
}
.havechai .couplet{
    margin-top: 0.8rem;
    background: #f75343;
    color: #ffcd63;
    box-shadow: -2px 2px 10px #000;
    width: 1rem;
}
.bigPicket.coupletBox{
    background-image: url('../img/bigPicket.png');
    background-size: 100% 100%;
    padding: 0.5rem 0.5rem;
}
.bigPicket.coupletBox .openButton{
    top: 0.8rem;
}
.gif{
    width: 100%;
    height: 3rem;
    background-color: #8e362e;
    margin:2rem auto 0 auto;
    border-radius: 0.3rem;
}
.bigPicket.coupletBox .progress{
    height: 9px;
    margin: 0.6rem 0 0 0.24rem;
    width: 78%;
}
.bigPicket.coupletBox .progress .progress-bar{
    background-color: #f35040;
}
.bigPicket.coupletBox .dot{
    background-color: #f35040;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    position: absolute;
    margin-top: 0.5rem;
}
.bigPicket.coupletBox .icon{
    width: 1rem;
    position: absolute;
    right: 0.3rem;
    margin-top: -0.5rem;
}
.bigPicket.coupletBox .describe{
    margin-top: 0.8rem;
    color: #c2181f;
    font-size: 0.28rem;
    text-align: center;
}
.bigPicket.coupletBox .describe.jiqi.first {
    margin-top: 0.3rem;
}
.bigPicket.coupletBox  .describe.jiqi {
    margin-top: 0rem;
}
.bigPicket.coupletBox.yichai{
    background-image: url('../img/havechai.png');
    height: 7.4rem;
    width: 80%;
    margin-top: 0.65rem;
}
.bigPicket.coupletBox .zhufu{
    text-align: center;
    color: #c2181f;
}
#type1 .background {
    background-image: url('../img/type1.png');
    background-size: 100% 100%;
    height: 8.2rem;
    margin-top: 1rem;
}
#type1 .cross{
    background-color: #f95646;
    box-shadow: 0 3px 10px #3c3535;
    color: #fdd57f;
    text-align: center;
    font-size: 0.7rem;
    width: 4rem;
    position: absolute;
    top: 0.4rem;
    left:50%;
    transform: translateX(-50%);
}
#type1 .gif{
    background-color: #9f453c;
    width: 5rem;
    height: 3rem;
    position: relative;
    top: 3rem;
}
#type1 .company{
    text-align: center;
    font-size: 0.3rem;
    position: relative;
    top: 3.4rem;
    color: #ffd06a;
}
#type1 .amount{
    font-size: 0.8rem;
    position: relative;
    top: 3.2rem;
    text-align: center;
    color: #fff;
}
#type1 .amount small {
    font-size: 0.3rem;
    color: #fff;
}
#type2 .background{
    background-image: url('../img/type2.png');
    background-size: 100% 100%;
    height: 8.2rem;
    margin-top: 1rem;
}
#type2 .cross{
    color: #fdd57f;
    text-align: center;
    font-size: 0.7rem;
    width: 4rem;
    position: absolute;
    top: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
}
#type2 .gif {
    background-color: #9f453c;
    width: 5rem;
    height: 3rem;
    position: relative;
    top: 3rem;
}

#type2 .company {
    text-align: center;
    font-size: 0.3rem;
    position: relative;
    top: 3.4rem;
    color: #9f453c;
}

#type2 .amount {
    font-size: 0.8rem;
    position: relative;
    top: 3.2rem;
    text-align: center;
    color: #fff;
}
#type2 .amount small{
    font-size: 0.3rem;
    color: #9f453c;
}